<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!-- 组织列表 -->
      <el-col :xs="24" :sm="24" :lg="6">
        <UnitTree ref="unitTree" :ancestors="ancestorsServicer" :ancestorsOther="ancestorsProvider" @unitNodeClick="unitNodeClick"></UnitTree>
      </el-col>

      <!-- 管理列表 -->
      <el-col :xs="24" :sm="24" :lg="18">
        <el-tabs v-model="tabActive">
          <el-tab-pane label="用户管理" name="1">
            <UserTable ref="userTable" :ancestors="ancestorsServicer" roleKey="service"></UserTable>
          </el-tab-pane>
          <el-tab-pane label="关联客户" name="2">
            <UnitTable ref="unitTable" :ancestors="ancestorsProvider"></UnitTable>
          </el-tab-pane>
          <el-tab-pane label="服务合同" name="3">
            <ProjectTable ref="projectTable" :ancestorsServicer="ancestorsServicer" :ancestorsProvider="ancestorsProvider" :showUnitSearch="false">
            </ProjectTable>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import UnitTree from "../UnitTree.vue";
  import UserTable from "../UserTable.vue";
  import UnitTable from "../UnitTable.vue";
  import ProjectTable from "../ProjectTable.vue";

  export default {
    name: "Servicer",
    components: {
      UnitTree,
      UserTable,
      UnitTable,
      ProjectTable
    },
    data() {
      return {
        tabActive: '1'
      };
    },
    methods: {
      // 节点单击事件
      unitNodeClick(data, col) {
        if (col.label !== '操作') {
          this.$refs.userTable.queryParams.deptId = data.deptId;
          this.$refs.userTable.getList();

          this.$refs.unitTable.setData(data);

          this.$refs.projectTable.queryParams.unitId = data.deptId;
          this.$refs.projectTable.getList();
        }
      }
    }
  };
</script>
